<template>
    <section class="menu-container">
        <div class="search-container">
            <div class="search-box">
                <h1>菜单搜索</h1>
                <el-input
                    v-model="data.searchData.name"
                    placeholder="请输入菜单名称"
                    @input="
                        (res: any) => {
                            data.onSearch(res, 'name')
                        }
                    "
                    clearable
                    style="width: 200px; margin-right: 16px"
                />
                <h1>权限编码</h1>
                <el-input
                    v-model="data.searchData.permsUrl"
                    placeholder="请输入权限编码"
                    @input="
                        (res: any) => {
                            data.onSearch(res, 'permsUrl')
                        }
                    "
                    clearable
                    style="width: 200px"
                />
            </div>
            <div class="add-menu">
                <el-button @click="data.operate('create')" v-permission="['POST:/api/user/manage/permissions']"
                    >新增菜单</el-button
                >
            </div>
        </div>

        <el-table
            :data="data.filterTableData"
            style="width: 100%; height: 100%; max-height: 100%"
            :border="false"
            :header-cell-style="{ background: '#F5F5F5' }"
            row-key="id"
            :tree-props="{ children: 'subPermissions' }"
        >
            <el-table-column prop="name" label="菜单名称" width="200" :show-overflow-tooltip="true" />
            <el-table-column prop="component" label="组件地址" :show-overflow-tooltip="true" />
            <el-table-column prop="routePath" label="路由地址" :show-overflow-tooltip="true" />
            <el-table-column prop="permsUrl" label="权限编码" :show-overflow-tooltip="true" />
            <el-table-column prop="sortNo" label="排序" align="center" width="80" />
            <el-table-column label="状态" width="80" align="center">
                <template #default="scope">
                    <Switch
                        :status="scope.row.disable"
                        @change="data.operate('switch', scope.row)"
                        v-permission="['POST:/api/user/manage/permissions/status']"
                    ></Switch>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center" width="100">
                <template #default="scope">
                    <DictVue
                        :data="DICT_DATA.get('menuType')"
                        :value="val"
                        v-for="(val, index) in scope.row.type.toString().split(',')"
                        :key="val"
                        :style="{
                            'margin-right': index < scope.row.type.toString().split(',').length ? '8px' : 0
                        }"
                    ></DictVue>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="操作时间" align="center" width="180" />
            <el-table-column label="操作" align="center" width="150" fixed="right">
                <template #default="scope">
                    <div class="operate-btn">
                        <span
                            class="delete"
                            @click="data.operate('delete', scope.row)"
                            v-permission="['DELETE:/api/user/manage/permissions']"
                            >删除</span
                        >
                        <span
                            @click="data.operate('create', scope.row)"
                            v-permission="['POST:/api/user/manage/permissions']"
                            >新增</span
                        >
                        <span
                            @click="data.operate('edit', scope.row)"
                            v-permission="['PUT:/api/user/manage/permissions']"
                            >编辑</span
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑弹窗 -->
        <MenuDialog :data="data.formData" :tableData="data.tableData" @close="data.dialogClose"></MenuDialog>
    </section>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { MenuData } from '.'
import MenuDialog from './Operate.vue'
import Switch from './Switch.vue'
import DictVue from '@/components/dict/Index.vue'
import { DICT_DATA } from '@/utils/dict-data'

const data = reactive(new MenuData())
</script>

<style scoped lang="scss">
.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    .search-box {
        display: flex;
        align-items: center;
        h1 {
            width: auto;
            font-size: 14px;
            margin-right: 10px;
        }
    }

    .add-menu {
        margin-left: 10px;
    }
}
.menu-container {
    box-sizing: border-box;
    padding: 24px;
    background-color: #fff;

    .operate-btn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
            font-size: 14px;
            cursor: pointer;
            color: #409eff;
            &.delete {
                color: #f20;
            }
        }
    }
}
.menu-container {
    .line {
        display: flex;
        margin-bottom: 16px;
    }
    .title {
        width: 120px;
        text-align: right;
        line-height: 34px;
    }
}
</style>
